<script setup lang="ts">
import type { FormItemTool } from '../../../types/index.ts'
type IProps = {
  item: FormItemTool<'input'>
  allDisabled: boolean
  isEditByRow: boolean
  getRef?: (el: any) => void
}
const props = withDefaults(defineProps<IProps>(), {isEditByRow: true,})
const { item, allDisabled, isEditByRow } = toRefs(props)
const emits = defineEmits(['keyUpEnter'])
const value = defineModel<any>('value')
const elRef = ref<any>()
const keyUpEnter = ($event: any, item: any) => {
  emits('keyUpEnter', $event, item)
}
const getRef = () => {
  return elRef.value
}
const valueCom = computed({
  get(){
    if(item.value?.config?.valueType === 'number') {
      return value?.value ? (value?.value).toString() : undefined
    }
    return value.value
  },
  set(val: string) {
    if(item.value?.config?.valueType === 'number') {
      return value.value = +val || undefined
    }
    value.value = val
  }
})
defineExpose({
  getRef,
})
</script>
<template>
  <span class="w-full flex-1">
    <el-input
      v-if="isEditByRow"
      :ref="(el) => {elRef = el; props?.getRef?.(el)}"
      clearable
      :disabled="allDisabled"
      v-model="valueCom"
      v-bind="item?.config"
      v-on="item?.eventFunction || {}"
      @keyup.enter="keyUpEnter($event, item)"
    >
      <template v-for="slotName in item?.slotNames" #[slotName]="slotData">
        <slot :name="slotName" :slotData="slotData"> </slot>
      </template>
    </el-input>
    <span v-else> {{ value }} </span>
  </span>
</template>

<style scoped lang="scss">
</style>
